     * {
        margin: 0;
        padding: 0;
        /* box-sizing: border-box; */
      }

      .main {
        width: 100vw;
        height: 100vh;
        display: flex;
        position: relative;
        background-color: #5053fc;
        overflow: hidden;
      }
      .iconfont {
        width: 80px;
        height: 80px;
        position: absolute;
        left: 27%;
        z-index: 999;
        font: 900 80px "Font Awesome 5 Free"; /* 确保这里使用了正确的字体名称 */
        color: #fff;
      }

      #up-btn {
        top: 5%;
      }

      #down-btn {
        bottom: 5%;
      }

      #content {
        width: 30%;
        height: 100%;
        position: absolute;
        left: 15%;
        overflow: hidden;
      }

      .card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: white;
        transition: transform 0.8s ease-in-out;
      }

      .card-time {
        font-size: 40px;
        font-weight: 700;
      }

      .card-title {
        font-size: 50px;
        font-weight: 500;
        padding-bottom: 10px;
        border-bottom: 1px solid white;
        margin-bottom: 10px;
      }

      .card-passage {
        font-size: 24px;
        font-weight: 300;
      }

      #clock {
        height: 130%;
        /* 纵横比为1:1 */
        aspect-ratio: 1 / 1;
        position: absolute;
        right: -28%;
        top: -15%;
        border-radius: 50%;
        background-color: white;
        border: #ff9214 30px solid;
      }

      @media (max-width: 1000px) {
        #clock {
          right: -90%;
        }
      }

      #clock-table {
        width: 96%;
        height: 96%;
        border-radius: 50%;
        position: absolute;
        top: 2%;
        left: 2%;
        transition: transform 0.8s ease-in-out;
      }

      .invisible-table {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transform-origin: 50% 50%;
        position: absolute;
      }

      .clock-thick {
        width: 6%;
        height: 6px;
        background-color: #5053fc;
        position: absolute;
        top: calc(50% - 3px);
        left: 0px;
      }

      .clock-thick span {
        font-size: 50px;
        position: absolute;
        left: 140%;
        top: calc(50% - 30px);
        color: #5053fc;
      }

      .clock-scale {
        width: 4%;
        height: 2px;
        background-color: #5053fc;
        position: absolute;
        top: calc(50% - 0.5px);
        left: 0px;
      }